<template>
  <el-table v-loading="loading" :data="courseclassList" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="课程名" align="center" prop="course_name" />
    <el-table-column label="上课班级班号" align="center" prop="courseclass_no" />
    <el-table-column label="已完成" align="center" prop="doneNum" />
    <el-table-column label="总数" align="center" prop="stuNum" />
    <el-table-column label="完成进度" align="center" >
      <template slot-scope="scope">
        <el-progress :percentage="(scope.row.doneNum/scope.row.stuNum*100).toFixed(0)" :format="format"></el-progress>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>

import {countEvaluationProgressByEvaluationActivityIdAndTeacherId} from "@/api/pingjiao/evaluationProgress";

export default {
  name: "courseclassList",
  data() {
    return {
      // 遮罩层
      loading: true,
      courseclassList: [],
      teacherId: null,
      evalutionActivityId: null
    };
  },
  created() {
    const teacherId = this.$route.params && this.$route.params.teacherId;
    this.teacherId = teacherId
    const evalutionActivityId = this.$route.params && this.$route.params.evalutionActivityId;
    this.evalutionActivityId = evalutionActivityId
    this.countEvaluationProgress();
  },
  mounted() {
  
  },
  methods: {
    countEvaluationProgress(){
      this.loading = true;
      countEvaluationProgressByEvaluationActivityIdAndTeacherId(this.evalutionActivityId,this.teacherId).then(response => {
        this.courseclassList = response.rows;
        console.log(response);
        this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.studentId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    format(percentage) {
      return percentage === 100 ? '满' : `${percentage}%`;
    }
  }
}
</script>

<style scoped>

</style>
